<template>
  <div class="container_box">
    <Header></Header>

    <div class="warpper warpper_box">
      <div class="left">
        <div class="card">
          <div class="title">
            <span class="el-icon-location-outline"></span>
            <h3>北京周边游</h3>
          </div>
          <div class="main">
            <div class="item">
              <p>行程天数</p>
              <div class="dayPlay">
                <span>1天游</span>
                <span>2日游</span>
                <span>3天游</span>
                <span>4天游</span>
                <span>5天游及以上</span>
              </div>
            </div>
            <div class="item">
              <p>周边城市</p>
              <div class="dayPlay">
                <span>天津</span>
                <span>唐山</span>
                <span>秦皇岛</span>
                <span>承德</span>
                <span>保定</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 搜索路线 -->
        <div class="search_path">
          <div class="title">旅游线路搜素</div>
          <div class="main">
            <el-form ref="form" :model="searchPath" label-width="80px">
              <el-form-item label="出发地">
                <el-input v-model="searchPath.depart"></el-input>
              </el-form-item>
              <el-form-item label="目的地">
                <el-input v-model="searchPath.destination"></el-input>
              </el-form-item>
              <el-form-item label="关键字">
                <el-input v-model="searchPath.keyword"></el-input>
              </el-form-item>
              <el-form-item label="价格范围">
                <el-col :span="11">
                  <el-input
                    placeholder=""
                    v-model="searchPath.sprice"
                  ></el-input>
                </el-col>
                <el-col class="line" :span="2" style="text-align: center"
                  >至</el-col
                >
                <el-col :span="11">
                  <el-input
                    placeholder=""
                    v-model="searchPath.eprice"
                  ></el-input>
                </el-col>
              </el-form-item>
            </el-form>
            <div class="btn">查询路线</div>
          </div>
        </div>
        <!-- 旅行推荐 -->
        <div class="traveRecommend">
          <div class="title">
            <div class="l">北京旅行社推荐</div>
            <div class="r changeHand">更多>></div>
          </div>
          <div class="main">
            <p>><span>北京神舟国际旅行社集团有限公司</span></p>
          </div>
        </div>
        <!-- 旅行指南 -->
        <div class="traveGuide">
          <div class="title">北京旅行指南</div>
          <div class="main">
            <div class="item">北京旅行线路</div>
            <div class="item">北京旅行景点</div>
            <div class="item">北京酒店预订</div>
            <div class="item">北京旅行租车</div>
            <div class="item">北京旅行攻略</div>
            <div class="item">北京旅行社</div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="floor-1">
          <div class="floor_title">
            <h3>北京旅游线路推荐</h3>
            <ul>
              <li v-for="(item, index) in traveRecommend" :key="index">
                {{ item }}
              </li>
            </ul>
          </div>
          <div class="floor_main">
            <ul>
              <li v-for="(item, index) in 8" :key="index">
                <div class="bgimg">
                  <img
                    src="https://lvyou2.xiluweb.com/small/2020/0215/15817288179748.jpg"
                    alt=""
                  />
                </div>
                <div class="title">
                  2021年平谷桃花节,赏花地点和时间,2021平谷桃花节一日游,二
                </div>
                <div class="tip">
                  <p>￥198<span>起</span></p>
                  <div class="province">
                    <span>省</span>
                    ￥20
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="floor-2">
          <div class="floor_title">
            <h3>当季主题旅游推荐</h3>
            <ul>
              <li v-for="(item, index) in seasonTrave" :key="index">
                {{ item }}
              </li>
            </ul>
            <ul class="octetTrave">
              <li v-for="(item, index) in octetTrave" :key="index">
                {{ item }}
              </li>
            </ul>
          </div>
          <div class="floor_main">
            <ul>
              <li v-for="(item, index) in 5" :key="index">
                <h2>{{ index + 1 }}</h2>
                <div class="center_box">
                  <div class="top">
                    丹东到朝鲜一日游 除周一外 天天发团 收客中
                    <span>推荐</span>
                  </div>
                  <div class="bottom">
                    <span>旅行社:丹东中国国际旅行社有限公司</span>
                    <span>线路类别: 出境游</span>
                    <span>行程天数:1天</span>
                  </div>
                </div>
                <div class="price_box">
                  <div class="price">￥790<span>起</span></div>
                  <div class="money"><del>￥800</del><b>省10</b></div>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="floor-3">
          <div class="floor_title">
            <div class="l">
              <h3>北京周边旅游推荐</h3>
              <ul>
                <li>北京旅游线路</li>
              </ul>
            </div>
            <div class="r">
              <div class="more">
                更多
                <i class="el-icon-d-arrow-right"></i>
              </div>
            </div>
          </div>
          <div class="floor_main">
            <div class="left">
              <ul>
                <li v-for="(item, index) in 10" :key="index" class="changeHand">
                  <i class="el-icon-arrow-right"></i>
                  <p class="singleLine">
                    2021年平谷桃花节,赏花地点和时间,2021平谷桃花节一日游,二
                  </p>
                  <span>198 <b>起</b> </span>
                </li>
              </ul>
            </div>
            <div class="right">
              <ul>
                <li v-for="(item, index) in 10" :key="index" class="changeHand">
                  <i class="el-icon-arrow-right"></i>
                  <p class="singleLine">
                    2021年平谷桃花节,赏花地点和时间,2021平谷桃花节一日游,二
                  </p>
                  <span>198<b>起</b></span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import Header from "@/components/Header.vue";
import Footer from "../components/Footer.vue";
export default {
  props: {},
  components: { Header, Footer },
  data() {
    return {
      searchPath: {
        depart: "", // 出发地
        destination: "", // 目的地
        keyword: "", // 关键字
        sTime: "", // 开始时间
        eTime: "", // 结束时间
      },
      // 旅游推荐标题
      traveRecommend: ["北京旅游团", "北京旅游网", "北京旅游地图"],
      // 当季主题旅游推荐
      seasonTrave: ["北京旅游景点大全", "北京旅游攻略", "北京旅游"],
      // 旅游季节
      octetTrave: ["温泉", "海岛游", "春游", "十一国庆节", "圣诞,元旦"],
    };
  },
  methods: {},
  mounted() {},
  watch: {},
  computed: {},
  filters: {},
};
</script>
<style lang="scss" scoped>
.warpper {
  display: flex;
  // align-items: center;
  // justify-content: space-between;
  margin-top: 30px;
  .left {
    width: 350px;
    margin-right: 20px;
    .card {
      border: 1px solid #ddd;
      .title {
        display: flex;
        align-items: center;
        padding: 10px 15px;
        background-color: #37bcfb;
        span {
          color: #fff;
          font-size: 30px;
          margin-right: 6px;
        }
        h3 {
          font-size: 24px;
          color: #fff;
          font-weight: 400;
        }
      }
      .main {
        padding: 20px 15px;
        .item {
          margin-top: 10px;
          p {
            color: #37bcfb;
          }
          .dayPlay {
            color: #333;

            span {
              margin-right: 10px;
              cursor: pointer;
              &:hover {
                color: #ff5500;
              }
            }
          }
        }
      }
    }
    .search_path {
      margin-top: 20px;
      border: 1px solid #ddd;
      .title {
        color: #666;
        padding: 10px 20px;
        font-size: 20px;
        background-color: #ddd;
      }
      .main {
        padding: 10px 30px;

        .btn {
          text-align: center;
          line-height: 40px;
          margin: 20px auto;
          background-color: #37bcfb;
          color: #fff;
          width: 120px;
          height: 40px;
          border-radius: 2px;
          font-size: 20px;
        }
      }
    }
    .traveRecommend {
      border: 1px solid #ddd;
      margin-top: 20px;
      .title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 10px;
        background-color: #ddd;
        .l {
          font-size: 20px;
          color: #555;
        }
      }
      .main {
        padding: 20px 30px;
        p {
          color: #ccc;
          cursor: pointer;
          span {
            color: #37bcfb;
          }
        }
      }
    }
    .traveGuide {
      border: 1px solid #ddd;
      margin-top: 20px;
      margin-bottom: 30px;
      .title {
        background-color: #ddd;
        color: #333;
        padding: 10px 20px;
        font-size: 20px;
      }
      .main {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        .item {
          width: 150px;
          margin: 10px;
          background-color: #37bcfb;
          padding: 10px 0;
          text-align: center;
          color: #fff;
          cursor: pointer;
        }
      }
    }
  }
  .right {
    flex: 1;
    .floor-1 {
      .floor_title {
        display: flex;
        align-items: center;
        height: 40px;
        border-bottom: 1px solid #ddd;
        h3 {
          color: #00b1f9;
          font-size: 20px;
          height: 100%;
          font-weight: 400;
          border-bottom: 2px solid #37bcfb;
          margin-right: 10px;
        }
        ul {
          display: flex;
          align-items: center;
          li {
            color: #00b1f9;
            margin: 0 10px;
            cursor: pointer;
          }
        }
      }
      .floor_main {
        width: 100%;
        margin-top: 10px;
        ul {
          display: flex;
          flex-wrap: wrap;

          li {
            margin-right: 20px;
            width: 22.2%;
            cursor: pointer;
            margin-top: 10px;
            &::nth-child(4n) {
              margin: 0;
            }
            .bgimg {
              width: 100%;
              // height: 120px;
              margin: 8px 0;
              img {
                width: 100%;
              }
            }
            .title {
              font-size: 12px;
              &:hover {
                color: #ff5500;
              }
            }
            .tip {
              display: flex;
              align-items: center;
              justify-content: space-between;
              p {
                color: #ff5552;
                font-size: 20px;
                span {
                  color: #ccc;
                  font-size: 12px;
                }
              }
              .province {
                border: 1px solid #00b1f9;
                color: #00b1f9;
                display: flex;
                width: 45px;
                height: 20px;
                font-size: 12px;
                span {
                  background-color: #00b1f9;
                  color: #fff;
                }
              }
            }
          }
        }
      }
    }
    .floor-2 {
      margin-top: 20px;
      .floor_title {
        display: flex;
        align-items: center;
        height: 40px;
        border-bottom: 1px solid #ddd;
        h3 {
          color: #00b1f9;
          font-size: 20px;
          height: 100%;
          font-weight: 400;
          border-bottom: 2px solid #37bcfb;
          margin-right: 10px;
        }
        ul {
          display: flex;
          align-items: center;
          li {
            color: #00b1f9;
            margin: 0 6px;
            cursor: pointer;
          }
        }
        ul.octetTrave {
          li {
            font-size: 12px;
            margin: 0 10px;
          }
        }
      }
      .floor_main {
        ul {
          li {
            padding: 10px 20px;
            border-bottom: 1px solid #ddd;
            display: flex;

            h2 {
              width: 50px;
              font-size: 30px;
              font-style: oblique;
              color: #00b1f9;
            }
            .center_box {
              flex: 1;
              display: flex;
              flex-direction: column;
              justify-content: flex-end;
              .top {
                font-size: 16px;
                color: #00a9f7;
                cursor: pointer;
                &:hover {
                  color: #ff5500;
                }
                span {
                  margin-left: 20px;
                  background-color: #00a9f7;
                  color: #fff;
                  padding: 2px 6px;
                  border-radius: 2px;
                  font-size: 14px;
                }
              }
              .bottom {
                color: #ccc;
                font-size: 12px;
                span {
                  margin-right: 20px;
                }
              }
            }
            .price_box {
              width: 100px;
              .price {
                color: #ff5500;
                font-size: 18px;
                font-weight: 700;
                span {
                  font-size: 12px;
                  color: #ccc;
                  font-weight: 400;
                }
              }
              .money {
                del {
                  font-size: 12px;
                  color: #ccc;
                  margin-right: 10px;
                }
                b {
                  position: relative;
                  padding: 0 4px;
                  background-color: #00a9f7;
                  color: #fff;

                  &::before {
                    content: "";
                  }
                }
              }
            }
          }
        }
      }
    }
    .floor-3 {
      margin-top: 30px;
      .floor_title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #ddd;
        .l {
          display: flex;
          align-items: center;
        }
        h3 {
          color: #00b1f9;
          font-size: 20px;
          height: 100%;
          font-weight: 400;
          border-bottom: 2px solid #37bcfb;
          margin-right: 10px;
        }
        ul {
          margin: 0 30px;
          li {
            cursor: pointer;
          }
        }
        .more {
          cursor: pointer;
        }
      }
      .floor_main {
        width: 100%;
        display: flex;
        justify-content: space-between;
        .left,
        .right {
          width: 49%;
          ul {
            li {
              width: 100%;
              height: 40px;
              padding: 20px 0;
              display: flex;
              align-items: center;
              justify-content: center;
              border-bottom: 1px solid #ddd;
              i {
                font-size: 12px;
              }
              p {
                height: 18px;
                flex: 1;
                font-size: 12px;
              }
              span {
                width: 50px;
                margin-left: 8px;
                font-size: 16px;
                color: #ff7c48;
                b {
                  color: #ccc;
                  font-size: 12px;
                  font-weight: 400;
                }
              }
            }
          }
        }
        .right {
          width: 50%;
        }
      }
    }
  }
}
</style>
